<template>
  <div class="container">

    <div class="input-group" v-if="SearchState">
      <input type="text" class="input-field" v-model="SearchValue" placeholder="请输入内容..." />
      <button class="submit-btn" @click="submit">搜索</button>
    </div>

    <div class="video-container">
      <div style="display: flex">
        <div class="video-player">
          <video :src="currentVideo.src" controls muted style="width: 100%; height: 100%; object-fit: fill"></video>
        </div>
        <div class="video-introduce">
          {{ currentVideo.description }}
          <hr class="footer-divider" />
          <div class="video-tags">
            <div class="tag">
              <div>
                test1:
                <span>{{ introduce.test1 }}</span>
              </div>
              <div>
                test2: <span>{{ introduce.test2 }}</span>
              </div>
              <div>
                test3: <span>{{ introduce.test3 }}</span>
              </div>
              <div>
                test4: <span class="Warning item-with-separator" v-for="item in introduce.test4" :key="item" @click="handleClick(item)">{{ item }} </span>
              </div>
              <div>
                test5: <span class="Warning item-with-separator" v-for="item in introduce.test5" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
              <div>
                test6: <span class="Warning item-with-separator" v-for="item in introduce.test6" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
              <div>
                test7: <span class="Warning item-with-separator" v-for="item in introduce.test7" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
              <div>
                test8: <span class="Warning item-with-separator" v-for="item in introduce.test8" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
              <div>
                test9: <span class="Warning item-with-separator" v-for="item in introduce.test9" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
              <div>
                test10: <span class="Warning item-with-separator" v-for="item in introduce.test10" :key="item" @click="handleClick(item)">{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="video-description">
        <h1>{{ currentVideo.title }}</h1>
      </div>

      <div class="content-1">
        <div class="content-1-list" v-for="content in correlation" :key="content" @mouseover="onMouseEnter1(content.id)" @mouseout="onMouseLeave1(content.id)" @click="onLinkClick1(content.id)">
          <div class="video-preview">
            <video :src="content.video" style="width: 100%; height: 100%; object-fit: fill" muted loop preload="metadata" playsinline></video>
            <img :src="content.imageUrl" alt="" />
          </div>
          <NuxtLink :to="'/content/' + content.id">{{ content.description }}</NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();

const router = useRouter();

const currentVideo = ref({
  src: "/可莉game_1603073107_8874.mp4",
  description: "在这个精彩的视频中，我们踏上了一场视觉与心灵的奇妙旅程。随着镜头缓缓展开，壮阔的自然风光与繁华都市的脉动交织在一起，展现了一个世界多元而和谐的美。跟随主角的步伐，我们不仅见证了古老文明的遗迹在现代生活中的重生，还目睹了科技创新如何以前所未有的方式连接每一个角落。情感充沛的叙事与震撼的视觉效果相互交融，每一分每一秒都扣人心弦。这不仅仅是一次旅行，更是一次关于梦想、爱与希望的深刻探索。在短短几分钟内，你将被带入一个充满无限可能的宇宙，重新发现生活中那些被忽略的美好。准备好，让我们一起启程，去感受这个世界的广阔与细腻。", // 视频描述
  title: "这是一个视频描述", // 视频标题，用于演示
});

const introduce = ref<any>({
  test1: "1",
  test2: "2",
  test3: "3",
  test4: [1, 2, 3, 4],
  test5: [4, 5, 6, 7],
  test6: [8, 9, 10, 11],
  test7: [12, 13, 14, 15],
  test8: "8",
  test9: "9",
  test10: [16, 17, 18, 19],
});

const hoveredKey = ref(null);

const handleClick = (id: any) => {
  console.log(id);
  router.push({ path: `/grouping/${id}` });
};

let contentObjTemplate: any = {
  imageUrl: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  video: "https://vjs.zencdn.net/v/oceans.mp4",
  id: 0,
  description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
};

let lastId = 0;

let correlation = Array.from({ length: 10 }, (_, index) => {
  let newObj = Object.assign({}, contentObjTemplate);
  newObj.id = lastId + index + 1; // 注意：index是从0开始的，所以需要+1以匹配期望的id序列
  newObj.description = newObj.description.replace("${i}", index + 1);
  return newObj;
});

const videoPlayers: any = {};

const onMouseEnter1 = (id: any) => {
  if (videoPlayers[id]) {
    videoPlayers[id].play();
    videoPlayers[id].style.opacity = 1;
  }
};

const onMouseLeave1 = (id: any) => {
  if (videoPlayers[id]) {
    videoPlayers[id].pause();
    videoPlayers[id].currentTime = 0;
    videoPlayers[id].style.opacity = 0;
  }
};

const onLinkClick1 = (id: any) => {
  router.push({ path: `/content/${id}` });
};

onMounted(() => {
  correlation.forEach((item: any) => {
    videoPlayers[item.id] = document.querySelector(`video[src="${item.video}"]`);
  });
});

const SearchState: any = useSearch();

const SearchValue = ref("");

const submit = () => {
  console.log(SearchValue.value);
  router.push({ path: `/search/${SearchValue.value}` });
};
</script>

<style scoped>
.container {
  width: 1600px;
  margin: 20px auto;
  max-width: 100%;
  box-sizing: border-box;
}

.video-player {
  /* 视频播放器样式 */
  width: 1000px;
  height: 562.5px;

  margin-right: 20px;
}

.video-introduce {
  width: 580px;
}

.content-1 {
  margin: 20px 0;
  height: 500px;
  /* background-color: #475669; */
  width: 1600px;

  display: flex;
  flex-wrap: wrap;
}

.content-1-list {
  height: 200px;
  flex: 0 0 calc(20% - 10px); /* 五等分减去间距 */
  margin: 5px; /* 控制间距 */
}

a {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  width: 300px;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img:hover {
  cursor: pointer;
}

a:hover {
  cursor: pointer;
  color: #409eff;
}

.video-preview {
  cursor: pointer; /* 添加这行代码 */
  position: relative;
  width: 310px;
  height: 200px;
}
.video-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始不显示 */
  transition: opacity 0.3s ease-in-out; /* 平滑过渡 */
}

.Warning {
  color: #e6a23c;
}

.Warning:hover {
  cursor: pointer;
  color: #007bff;
}

.tag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  font-family: Arial, sans-serif;
}

.tag div {
  font-size: 24px;
}

.tag1 {
  color: #e6a23c;
}

.footer-divider {
  border: none;
  height: 1px;
  background-color: #666; /* 分界线颜色，可自定义 */
  margin: 20px 0; /* 上下间距，可自定义 */
}

.tag p {
  margin: 0;
  color: #343a40;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.tag a:hover {
  color: #007bff;
  cursor: pointer;
}

.item-with-separator:not(:last-child)::after {
  content: " ";
  margin: 0 5px; /* 可根据需要调整分隔符与文本的间距 */
}









.input-group {
  position: relative;
  width: 700px;
  margin: 20px auto;
}

.input-field {
  width: 600px;
  padding: 15px 20px;
  border-radius: 25px;
  border: 1px solid #ddd;
  outline: none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* 按钮样式 */
.submit-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  padding: 0 20px;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 0 25px 25px 0;
  font-size: 14px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #0056b3;
}

/* 输入框聚焦时按钮效果 */
.input-field:focus + .submit-btn {
  background-color: #0056b3;
}
</style>
